<template>
  <div class="userPapermain">
    <!-- <page-header-wrapper :breadcrumb="[]" title="问卷列表">
        
    </page-header-wrapper> -->
    <a-card>
        <span class="line">问卷列表</span>
    </a-card>
    
    <a-spin :spinning="loading">
        <div class="content">
            <a-card hoverable style="width: 15.5rem" v-for="(item, index) in PaperList" :key="index" class="content-card">
                <!-- <img
                    slot="cover"
                    alt="封面"
                    :src="item.cover"
                    style="width: 15.4rem; height: 13.5rem"
                /> -->
                <template slot="actions" class="ant-card-actions">
                    <span v-on:click="selectHandleClick(item)">编辑</span>
                    <span style="color: red; width: 100%" v-on:click="deleteHandleClick(item)">删除</span>
                </template>
                <a-card-meta :title="item.title" :description="item.createDate">
                </a-card-meta>
            </a-card>

            
        
        </div>
    </a-spin>
  </div>
</template>


<script>
import { fetchPaperList, delPaper } from '@/api/paper'
// import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
// import axios from 'axios'

export default {
    name: 'UserPaper',
    components: {
        // PageHeaderWrapper
    },
    data () {
        return {
            PaperList: [],
            loading: true
        }
    },
    methods: {
        selectHandleClick (e) {
            const { paperId } = e
            this.$router.push({
                path: '/public/paper/create',
                query: {
                    paperId: paperId
                }
            })
        },
        deleteHandleClick (e) {
            const _this = this
            const { paperId } = e
            console.log(paperId)
            this.$confirm({
                title: `你确定要删除该问卷吗？`,
                onOk: () => {
                    _this.loading = true
                    const hide = this.$message.loading('正在删除...', 0);
                    delPaper({
                        paperId: `${paperId}`
                    })
                        .then(res => {
                            console.log(res)
                            if (res.code == 200) {
                                _this.$message.success('删除成功')
                                _this.init()
                            } else {
                                _this.$message.error(res.errormsg ? res.errormsg : '删除失败，请重新尝试')
                                _this.loading = false
                            }
                            hide()
                        })
                },
                onCancel () {}
            })
        },
        init() {
            const _this = this
            _this.loading = true
            // this.$message.error('haha')
            // cover: "https://back-image.oss-cn-shenzhen.aliyuncs.com/answerimages/1592895974970_1.jpg"
            // paperId: "07f00519fd0a5798919156e2b845ded4"
            // title: "修改后
            fetchPaperList()
                .then(res => {
                    console.log(res)
                    if (res && res.code == 200) {
                        this.PaperList = res.data.papers
                        _this.loading = false

                    }

                })
        }
    },
    mounted: function () {
        this.init()
    }
}
</script>

<style scoped lang="less">
    /deep/ .ant-layout-content {
        margin: 0 
    }
    .userPapermain {
        position: relative;
        width: 100%;
        .line {
            border-left: 5px solid #1890ff;
            padding-left: 10px;
            font-weight: 500;
            font-size: 16px;
        }
        .content {
            position: relative;
            margin-top: 24px;
            display: flex;
            flex-wrap: wrap;
            min-height: 100px;
            //  justify-content: space-between
            .content-card {
                margin-right: 30px;
                margin-bottom: 30px;
                
            }
        }
    }
    
</style>